import React, {useState} from 'react'
import {Card} from 'antd'

export default ({pic, uid, answer, onWrong, onFinish}) => {
  const [clicked, setClicked] = useState(false)
  const onClick = () => {
    if(clicked) {return null}
    if(uid !== answer) {
      setClicked(true)
      onWrong()
    } else {
      onFinish()
    }
  }
  return (
    <div onClick={onClick}
         style={{position: 'relative'}}>
      <Card hoverable
            style={{height: 200, margin: 10}}
            cover={<img alt={uid}
                        src={`${process.env.PUBLIC_URL}/pics/${pic}`}/>}/>
      {clicked &&
       <div style={{
         position: 'absolute', top: '50%',
         textAlign: 'center', fontSize: 32,
         width: '100%'
       }}>
         <span style={{backgroundColor: 'gray'}}>这不是我！</span>
       </div>}
    </div>
  )
}
